<template>
  <!-- 审核dialog -->
  <el-dialog
    title="审批"
    v-model="visible"
    width="30%"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="dialogForm"
      label-width="80px"
      label-position="right"
      class="noFlex"
    >
      <el-form-item label="状态" prop="status">
        <el-radio-group
          v-model="form.status"
          :class="form.status == 1 ? 'pass' : 'refuse'"
        >
          <el-radio :label="1" text-color="#f56c6c">通过</el-radio>
          <el-radio :label="2">拒绝</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="审批意见">
        <el-input
          v-model="form.opinion"
          clearable
          type="textarea"
          rows="5"
          placeholder="请输入审核意见"
        ></el-input>
      </el-form-item>
      <el-form-item label="附件">
        <sc-upload-file
          v-model="form.examineFiles"
          :limit="10"
          :multiple="false"
          tip="最多上传10个文件,单个文件不要超过20M"
        >
          <el-button type="primary" plain icon="el-icon-upload"
            >上传附件</el-button
          >
        </sc-upload-file>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()"
        >确 定</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
export default {
  emits: ['success', 'closed'],
  data () {
    return {
      mode: 'check',
      form: {
        mainId: '',//主表id
        auditUserId: '',//当前审核人id
        opinion: '',//意见
        examineFiles: [],//附件
        status: 1,//1通过，2未通过 
        type: null,//流程类型
      },
      visible: false,
      isSaveing: false,
      //验证规则
      rules: {
        reason: [
          { required: true, message: '请输入审核意见' }
        ],
        status: [
          {
            required: true,
            message: '请选择审批状态',
            trigger: 'change',
          },
        ],


      }
    }
  },
  props: {
    info: {
      type: Object,
      default: () => { }
    }
  },
  mounted () {

  },
  methods: {
    //显示
    open (data) {
      this.visible = true
      this.form.mainId = data.mainId || data.correlationId
      this.form.type = data.type || data.streamType
      let userInfo = this.$TOOL.data.get('USER_INFO')
      this.form.auditUserId = userInfo.userId
    },
    submit () {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          let fileType = ''
          this.form.examineFiles.map(item => {
            if (item.url) {
              let arr = item.url.split('.')
              let type = arr[arr.length - 1]
              // fileType  1图片 2文件
              let imageType = 'jpg/png/jpeg/svg'
              if (imageType.includes(type)) {
                fileType = 1
              } else {
                fileType = 2
              }
              item.fileType = fileType
              item.fileName = item.name
            }
          })

          console.log(this.form)
          this.isSaveing = true
          this.loading = true
          let res = await this.$API.workflow.handleAudit.post(this.form)
          this.isSaveing = false
          if (res.code == 200) {
            this.visible = false
            this.$emit('update')
            this.$message.success("操作成功")

          }
        }
      })
    },

  }
}
</script>

<style lang='scss' scoped>
.pass {
  :deep(.el-radio__input.is-checked + .el-radio__label) {
    color: #67c23a !important;
  }

  :deep(.el-radio__input.is-checked) {
    .el-radio__inner {
      background: #67c23a !important;
      border-color: #67c23a !important;
    }
  }
}

.refuse {
  :deep(.el-radio__input.is-checked + .el-radio__label) {
    color: #f56c6c !important;
  }

  :deep(.el-radio__input.is-checked) {
    .el-radio__inner {
      background: #f56c6c !important;
      border-color: #f56c6c !important;
    }
  }
}
</style>
